<template>
	<view class="form-module">
		<u-form :model="consultForm" ref="consultForm" label-width="120">
			<u-form-item label="案件类型：" prop="event_name" :border-bottom="false">
				<u-input type="select" :select-open="isCaseTypeSelectorShow" :value="consultForm.event_name"
					@click="isCaseTypeSelectorShow = true" />
			</u-form-item>
			<!-- 			<u-form-item label="身份特征：" prop="case_type" :border-bottom="false">
				<u-input type="select" :select-open="isIdentitySelectorShow" v-model="consultForm.case_type"
					@click="isIdentitySelectorShow = true" />
			</u-form-item> -->
			<u-form-item label="案件地区：" prop="area" :border-bottom="false">
				<u-input type="select" :select-open="isAreaSelectorShow"
					:value="consultForm.pro+consultForm.city+consultForm.area" @click="isAreaSelectorShow = true" />
			</u-form-item>
			<u-form-item label="案件描述：" prop="content" :border-bottom="false" label-position="top">
				<view class="consult-input-container">
					<!-- 				<u-input type="textarea" maxlength="500" placeholder="请简单描述您的案件情况" height="128">
					</u-input>
					<view class="consult-input-footer-container">
						<view class="image-list-container">
							<u-upload :action="action" :file-list="fileList" custom-btn max-count="3">
								<view slot="addBtn" class="add-btn">

								</view>
							</u-upload>
						</view>
						<view class="word-count-container">
							0/500
						</view>
					</view> -->
					<imageTextArea ref="imageTextArea" placeholder="请简单描述您的案件情况" autoHeight :textareaMinHeight="128"
						maxlength="500" v-model="consultForm.content" />
				</view>
			</u-form-item>
		</u-form>
<!-- 		<view class="anonymous-switch-container">
			<text class="switch-label">匿名咨询</text>
			<u-switch v-model="checked" size="40" active-color="#8bc5f8"></u-switch>
		</view> -->
		<view class="price-wrapper">
			<text class="label">支付金额:</text><text class="price">{{userInfo?userInfo.vip>0?'会员免支付':`￥${price}`:`￥${price}`}}</text>
		</view>
		<view class="submit-button-container">
			<button class="submit-button" @click="submitOrder">提交案件咨询</button>
		</view>
		<u-select v-model="isCaseTypeSelectorShow" :list="caseTypeList" @confirm="selectCaseEventConfirm"></u-select>
		<u-picker mode="region" v-model="isAreaSelectorShow" @confirm="selectAreaConfirm"></u-picker>
	</view>
</template>

<script>
	import imageTextArea from "@/components/image-text-area/imageTextArea.vue";
	export default {
		options: {
			styleIsolation: 'shared'
		},
		props: {
			price: {
				type: String
			}
		},
		components: {
			imageTextArea,
		},
		async created() {
			const {
				data
			} = await this.$u.post(this.$restUrl.getConsultEventList);
			this.caseTypeList = data.map(item => {
				return {
					value: item.id,
					label: item.name
				}
			})
		},
		mounted() {
			this.$nextTick(() => {
				console.log('this.$refs.consultForm>>>>>>>>>>>>>>>>>>', this.$refs.consultForm)
				this.$refs.consultForm.setRules(this.rules);

			})
		},
		data() {
			return {
				isCaseTypeSelectorShow: false,
				isAreaSelectorShow: false,
				checked: false,
				consultForm: {
					event_id: '',
					event_name: '',
					pro: '',
					city: '',
					area: '',
					content: '',
				},
				rules: {
					event_name: [{
						required: true,
						message: '请选择案件类型',
						trigger: ['change', 'blur'],
					}],
					area: [{
						required: true,
						message: '请选择案件所在地区',
						trigger: ['change', 'blur'],
					}],
					content: [{
						required: true,
						message: '请输入您要咨询的内容',
						trigger: ['change', 'blur'],
					}]
				},
				action: 'http://www.example.com/upload',
				caseTypeList: [],
			}
		},
		methods: {
			submitOrder() {
				// console.log(this.$refs.imageTextArea.$refs.upload)
				let fireList = this.$refs.imageTextArea.$refs.upload.lists;
				if (fireList.some(item => item.progress < 100 && !iten.response)) {
					return this.$showToast('有图片正在上传')
				} else if (fireList.some(item => item.response.status_code != 200)) {
					return this.$showToast('图片上传失败,请上传格式为jpg/png/jpeg图片')
				}
				this.$refs.consultForm.validate(valid => {
					if (valid) {
						this.$emit('submitOrder', {
							event_id: this.consultForm.event_id,
							pro: this.consultForm.pro,
							city: this.consultForm.city,
							area: this.consultForm.area,
							content: this.consultForm.content,
							images: fireList.map(item => item.response.data.file_id + '').join(','),
						})
					}
				})
			},
			selectCaseEventConfirm(e) {
				console.log(e)
				this.$set(this.consultForm, 'event_name', e[0].label);
				this.$set(this.consultForm, 'event_id', e[0].value);
			},
			selectAreaConfirm(e) {
				console.log(e);
				this.$set(this.consultForm, 'pro', e.province.label);
				this.$set(this.consultForm, 'city', e.city.label);
				this.$set(this.consultForm, 'area', e.area.label);
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./formModule.scss";
</style>
